<template>
  <div :id="ueditorModel">
    <vue-ueditor-wrap :config="editorConfig" v-model="message" @ready="ready" :destroy="true" @beforeInit="addCustomDialog"></vue-ueditor-wrap>
    <p style="padding:10px;font-size:12px;color:red;">(图片放大缩小后，先点击上下左右键出现光标再行编辑)</p>
    <div :id="quillUploads">
            <el-upload
                :action="PERSONUPLOAD"
                :show-file-list="false"
                :on-success="handleBeforeUpload"
                :before-upload="beforeUpload"
                >
                </el-upload>
        </div>
  </div>
</template>
<script>
import api from '@/api/index';
import VueUeditorWrap from 'vue-ueditor-wrap'
import upload from '@/assets/img/upload.jpg';
export default {
  name: "Editor",
  components: {
    VueUeditorWrap
  },
  props: ["content"],
  data() {
    return {
      ueditorModel:'ueditorModel'+new Date().getTime(),
      quillUploads:'quillUploads'+new Date().getTime(),
        PERSONUPLOAD:api.API_PATH + api.LOGIN_IMG,
        myEditor:'',
      message: '',
      // 简单配置
      editorConfig: {
        autoHeightEnabled: false, //编译器不自动被内容撑高
        initialFrameHeight: 400, //初始容器高度
        initialFrameWith: "100%",
        serverUrl: api.LOGIN_IMG, //上传文件地址
        UEDITOR_HOME_URL: "./UEditor/", //UEditor资源文件的存放路径
        // UEDITOR_HOME_URL: "", //UEditor资源文件的存放路径
      }
    };
  },
  mounted() {
    // 这里是从列表页编辑时做的内容注入，没有需要可以不写
  },
  watch:{
      content:function(val){
          if(this.myEditor)this.message = val;
      },
  },
  methods: {
    ready(editorInstance){
        this.myEditor = editorInstance;
        this.message = this.content;
        this.addCustomDialog(this.myEditor)
    },
    getContent(){
        return this.myEditor.getContent();
    },
    addCustomDialog(editorId) {
      let that = this;
      window.UE.registerUI(
        "test-dialog",
        function(editor, uiName) {
          // 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
          var btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "上传图片",
            cssRules: `background-image: url(${upload}) !important;background-size: cover;`,
            onclick: function() {
              // 渲染dialog
               document.querySelector(`#${that.quillUploads} .el-upload__input`).click();
            }
          });

          return btn;
        },
        56 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */,
        editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );
    },
    uploadFile(url) {
      let editor = document.querySelector(`#${this.ueditorModel} .edui-default`).getAttribute("id");
      window.UE.getEditor(editor).execCommand("insertimage", {
        src: url
      });
    },
    //附件上传
    handleBeforeUpload(response) {
      console.log('response',response)
        this.loading.close();
        if (response.code == 1) {
            console.log(api.IMG_PATH+response.data);
            this.uploadFile(api.IMG_PATH+response.data)
        } else {
            this.$message.error("上传失败");
        }
    },
    beforeUpload: function (file) {
        var FileExt = file.name.replace(/.+\./, '');
        if (['jpg','jpeg','png'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传jpg,jpeg,png格式文件！'
                });
                return false;
        }
        this.loading = this.$loading({ text: '加载中...' });
    },
  },
  beforeDestroy() {
        let el=document.getElementById(this.ueditorModel);
        if(el){
          el.innerHTML='';
        }
    },
};
</script>